<template>
  <el-dialog
    :title="title"
    :visible.sync="is_show"
    :close-on-click-modal="false"
    class="dialog-print"
    width="842px"
    @close="resetDialog"
    append-to-body
  >
    <div :id="domId" ref="print" :style="print_style">
      <slot></slot>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="is_show = false">取消</el-button>
      <el-button size="small" type="primary" v-print="'#' + domId">打印</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props:{
    domId: {
      type: String,
    },
    title: {
      type: String,
    },
  },
  data() {
    return {
      is_show: false,
      print_style:{
        overflow:'auto',
      },
    }
  },

  methods: {
    init(callback){
      this.is_show = true;
      this.$nextTick(() => {
        let height = this.$refs.print.offsetHeight + 50 + 'px';
        this.print_style.height = height;
        if(typeof(callback) === 'function'){
          callback();
        } 
      });
    },
    resetDialog(){
      this.print_style.height = null;
    },
    handlePrint(){
      
    }
  },
}
</script>
<!-- <style lang="scss" scoped>
.bd{
  padding:15px 0;margin:15px 0;border-top:1px solid #000;border-bottom:1px solid #000;
}
</style> -->